<script setup>
import { ref } from 'vue'

const props = defineProps({
  tabsConfig: {
    type: Object,
    default: () => ({
      id: 'tab',
      title: 'content'
    })
  },
  change: {
    type: Boolean,
    default: true
  }
})

// 正确使用 ref
const currentTab = ref(0)
const selectedItems = ref(new Set())

// 切换标签方法
const handleTabChange = (index) => {
  currentTab.value = index
}
</script>

<template>
  <div class="tabs-container">
    <div class="tabs-header">
      <div
          v-for="(item, index) in ['Tab 1', 'Tab 2', 'Tab 3']"
          :key="index"
          :class="['tab-item', { active: currentTab === index }]"
          @click="handleTabChange(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="tabs-content">
      <slot :index="currentTab"></slot>
    </div>
  </div>
</template>

<style scoped>
.tabs-container {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.tabs-header {
  display: flex;
  border-bottom: 1px solid #ddd;
  background: #f5f5f5;
}

.tab-item {
  padding: 8px 16px;
  cursor: pointer;
}

.tab-item.active {
  background: #fff;
  border-bottom: 2px solid #409eff;
}

.tabs-content {
  padding: 16px;
}
</style>